<template>
    <header class="header-bg">
        <div class="header-top">
            <div class="header-nav">
                <div class="header-top-1">
                    <img src="https://course.myhope365.com/img/logo-text-green.2137bfaa.png" alt="" width="132px">
                    <div class="header-top-nav">
                        <ul>
                            <li>
                                <a href="#">首页</a>
                            </li>
                            <li>
                                <a href="#">课程分类</a>
                            </li>
                            <li>
                                <a href="#"> 教学管理云平台</a>
                            </li>
                        </ul>
                    </div>
                    <div class="header-span">
                        <div class="header-span-1">
                            <input type="text" placeholder="搜索课程~" v-model="searchKeyword">
                            <button class="header-span-btn" @click="handleSearch">
                                <img src="../image/搜索 (1).png" alt="" width="35px" height="35px">
                            </button>
                        </div>
                    </div>
                    <div class="header-right">
                        <div class="login-box">
                            <div class="car" @click="goToCart">
                                <img src=""
                                    alt="">
                            </div>
                            <div class="user">
                                <LoginView1></LoginView1>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </header>
</template>

<script>
import { logout } from '@/api/request';
import LoginView1 from '@/login/loginView1.vue';
export default {
    name: 'HeaderView',
    props: {
        msg: String
    },
    components: {
        // loginView,
        LoginView1,
    },
    data() {
        return {
            searchKeyword: '',
        }
    },
    methods: {
        handleSearch() {
            if (this.searchKeyword.trim()) {
                // 跳转到搜索页并携带关键字
                this.$router.push({
                    path: '/search',
                    query: {
                        keyword: this.searchKeyword.trim()
                    }
                })
            }
        },
        userLogout() {
            logout().then((result) => {
                console.log('logout', result);
                if (result.code == 0) {
                    this.$store.commit('setIsLogin', false);
                    this.$store.commit('setUserInfo', {});
                }
            }).catch((err) => {
                console.log(err);
            });
        },
        goToCart() {
            window.open('/car', '_blank');
        }
    },
    created() {
        
    },
}
</script>

<style scoped lang="scss">
.header-bg {
    width: 100%;
    height: 80px;
    background: #fff;
    transition: all 0.3s ease;

    .header-top {
        width: 100%;
        height: 80px;

        .header-nav {
            margin: 0 auto;
            position: relative;
            width: 1160px;
            height: 80px;

            .header-top-1 {
                height: 80px;
                display: flex;
                -webkit-box-align: center;
                align-items: center;

                .header-top-nav {
                    margin-right: 0px;
                    margin-left: 0px;
                    height: 30px;
                    font-weight: 600;
                    float: left;

                    ul {
                        // float: left;
                        display: flex;
                        margin: 0 5px 0 0;
                        font-size: 16px;

                        :first-child {
                            // margin-left: 100px;
                            width: 32px;
                        }

                        :nth-child(2) {
                            width: 65px;
                        }

                        :nth-child(3) {
                            width: 112px;
                        }

                        li {
                            margin-left: 30px;
                            // list-style: none;
                            // cursor: pointer;
                        }

                        a {
                            text-decoration: none;
                            color: black;
                        }
                    }
                }

                .header-span {
                    width: 600px;
                    height: 38px;

                    .header-span-1 {
                        input {
                            width: 220px;
                            height: 38px;
                            border-radius: 20px;
                            border: 1px solid #ccc;
                            padding: 0 10px;
                            font-size: 14px;
                            outline: none;
                            margin-left: 300px;
                        }

                        .header-span-btn {
                            width: 38px;
                            height: 38px;
                            border-radius: 20px;
                            // background-color: rgba(red, green, blue, 1);
                            border: none;
                            margin-left: -41px;
                            vertical-align: middle;
                        }
                    }
                }

                .header-right {
                    height: 100%;
                    font-size: 14px;
                    display: flex;
                    -webkit-box-align: center;
                    align-items: center;

                    .login-box {
                        height: 100%;
                        font-size: 14px;
                        display: flex;
                        -webkit-box-align: center;
                        align-items: center;

                        .car {
                            width: 36px;
                            height: 36px;
                            background: #fff;
                            border-radius: 50%;
                            box-shadow: 0 2px 4px 0 rgba(0, 0, 0, .23);
                            display: flex;
                            -webkit-box-align: center;
                            align-items: center;
                            -webkit-box-pack: center;
                            justify-content: center;
                            margin: 0 20px;
                        }

                        .user {
                            cursor: pointer;
                            display: flex;
                            -webkit-box-align: center;
                            align-items: center;
                            position: relative;
                            -webkit-box-pack: center;
                            justify-content: center;

                            .user-top {
                                color: #fff;
                                position: absolute;
                                font-size: 10px;
                                top: -50px;
                                width: 155px;
                                height: 41px;
                                text-align: center;
                                line-height: 30px;
                                font-weight: 500;
                                background: url();
                                background-size: 100%;
                            }

                            .user-login {
                                color: rgb(53, 199, 222);
                                width: 94px;
                                height: 30px;
                                background: #fff;
                                // -webkit-box-shadow: 0 2px 3px 0 rgba(0, 0, 0, .23);
                                box-shadow: 0 2px 3px 0 rgba(0, 0, 0, .23);
                                border-radius: 15px;
                                font-weight: 600;
                                font-size: 15px;
                                text-align: center;
                                line-height: 30px;
                            }
                        }
                    }
                }
            }
        }
    }
}


.user-info-box {
    display: flex;

    .user-avatar {
        margin-right: 5px;
    }

    .user-info {
        >div:first-of-type {
            font-size: 14px;
            font-weight: bold;
        }

        >div:nth-of-type(2) {
            color: #ab753f;
            font-weight: bold;
        }
    }
}


.userApproveItem {
    color: black !important;
    padding: 5px 10px !important;
}

.userApproveItem a {
    color: black !important;
}

.ant-popover-inner-content {
    padding: 5px !important;
}

.userApproveItem:hover,
.userApproveItem a:hover {
    background-color: rgb(230, 255, 243) !important;
    color: rgb(0, 207, 140) !important;
}
.ant-popover {
    z-index: 9999; // 设置较高的 z-index 值，确保弹出框显示在最上层
    display: block !important; // 强制显示弹出框，用于调试
}
</style>
